<template>
  <div>

    <v-card>

      <v-card-title>
        <v-btn color="primary" @click="addBrand">新增</v-btn>
        <v-spacer/>
        <v-text-field label="搜索" v-model="search" append-icon="search" hide-details/>
      </v-card-title>

      <v-divider/>


      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
            <span v-else>无</span>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn color="info" @click="editBrand(props.item)">编辑</v-btn>
            <v-btn color="warning">删除</v-btn>
          </td>
        </template>
      </v-data-table>

    </v-card>
    <!--dialog弹窗-->
    <v-dialog v-model="dialog" persistent max-width="500">
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{this.isEdit ? '修改品牌':"新增品牌"}}</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">

          <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"></my-brand-form>

        </v-card-text>
      </v-card>
    </v-dialog>

  </div>
</template>

<script>
  import MyBrandForm from "./MyBrandForm";

  export default {
    components: {MyBrandForm},
    name: "my-brand",
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, // 总条数
        brands: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true},
          {text: '操作', align: 'center', value: 'id', sortable: false}
        ],
        dialog: false,
        oldBrand: {},
        isEdit: false
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数据的方法。?rows=164&key=H&sortBy=id&desc=false
        // 发起请求
        this.$http.get("/item/brand/page", {
          params: {
            key: this.search, // 搜索条件
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
            sortBy: this.pagination.sortBy,// 排序字段
            desc: this.pagination.descending// 是否降序
          }
        }).then(resp => { // 这里使用箭头函数
          // 将得到的数据赋值给本地属性
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      addBrand() {
        this.isEdit = false;

        this.dialog = true;

        this.oldBrand = {};

      },
      closeWindow() {
        this.dialog = false;

        // 重新加载数据
        this.getDataFromServer();
      },
      editBrand(brand) {
        this.isEdit = true;

        this.$http.get("/item/category/bid/" + brand.id)
          .then(({data}) => {
            this.dialog = true;

            this.oldBrand = brand;

            this.oldBrand.categories = data
          });


      }
    },
    mounted() { // 挂载后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      search: {
        handler() {
          this.getDataFromServer();
        }
      },
      pagination: {
        deep: true,//深度监控，监控的是对象以及对象内部的属性
        handler() {
          this.getDataFromServer();
        }
      }
    }
  }
</script>

<style scoped>

</style>
